@import "@automattic/typography/styles/variables";

.bundled-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	line-height: 20px;
	padding: 0 10px 0 9px;
	border-radius: 20px; /* stylelint-disable-line scales/radii */
	box-sizing: border-box;
	font-size: 0.75rem;
	color: var(--studio-white);
	z-index: 1;

	span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: $sans;
	}

	.bundled-badge__icon {
		display: inline-flex;
		align-items: center;
		height: 20px;
		margin-right: 5px;

		svg {
			height: 20px;
		}
	}

	.design-picker .design-picker__option-meta & {
		min-height: 0;
	}

	.bundled-badge__logo {
		margin-top: -1px;
		margin-right: 3px;
		fill: currentcolor;
	}
}

.bundled-badge--is-clickable {
	cursor: pointer;

	.accessible-focus &:focus {
		box-shadow: 0 0 0 2px var(--color-primary-light);
	}
}

.bundled-badge__popover {
	max-width: 300px;
	outline: none;
	.popover__inner {
		background-color: #000;
		color: #eee;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		border: 0;
	}
	&.is-bottom-left,
	&.is-bottom-right {
		.popover__arrow {
			&::before {
				border-bottom-color: #000 !important;
			}
		}
	}
	&.is-top-left {
		.popover__arrow {
			&::before {
				border-top-color: #000 !important;
			}
		}
	}
	.popover__arrow {
		border: 10px dashed transparent;
	}
}
